<script setup lang="ts">
import { ref, Ref, isRef, shallowRef, triggerRef, customRef } from 'vue';
const message: string = 'dsjhjaoj'

type Style = {
  color: string,
  height: string
}
const style:Style = {
  color: 'blue',
  height: '100px'
}

const flag: boolean = false

type Cls = {
  a: boolean,
  e: boolean
}

const cls:Cls = {
  a: true,
  e: true
}

const arr: Array<any> = [{name: '1'}, {name: '2'}, {name: '3'}]

// import { ref, Ref, isRef, shallowRef, triggerRef, customRef } from 'vue';

let msg: Ref<string> = ref("laji")  // Ref 是 约束， message约束为一个ref对象
let obj = shallowRef({             // shallowRef设置响应对象，但里面的属性值不具有响应式
  name: "孙悟空"
})

// 自定义ref
function MyRef<T>(value: T) {
    return customRef((trank, trigger) => {
        return {
            get() {
                trank()
                return value
            },
            set(newVal: T) {
                console.log("set");
                value = newVal
                trigger()
            }
        }
    })
}
let myMsg = MyRef<string>('小小');

const changeMsg = () => {
  msg.value = 'change laji'
  console.log(msg);
  console.log(isRef(msg));
  obj.value.name = "猪八戒"              // ref 响应式更新会触发shallowRef 的更新，因为源码中 ref和shallowRef会调用同一个函数更新值
  // obj.value = {name: "猪八戒"}
//   triggerRef(obj)                 // 或者用 triggerRef强制更新dom

  myMsg.value = '大大'
}
</script>

<template>
  <div v-bind:style="style">
    {{message}}
  </div>
  <div :class="['a', 'c']">
    HelloWorld
  </div>
  <div :class="{a : flag, d : true}">
    HelloWorld1
  </div>
  <div :class="cls">
    HelloWorld2
  </div>
  <div v-for="(item, index) in arr" :key="index">{{item.name}}</div>

  <div>
    <button @click="changeMsg">change</button>
    <div>{{msg}}</div>
    <div>{{obj}}</div>
    {{myMsg}}
  </div>
</template>

<style>
.a {
  color: red;
}
.b {
  color: blue;
}
.c {
  border: 1px solid yellow;
}
.d {
  border: 1px solid green;
}
.e {
  border: 1px solid purple;
}
</style>